<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-page-container">
  <a [routerLink]="['..']" class="gv-back-link"><small><< Back to entrypoints</small></a>
  <h1>{{entrypoint.name}}</h1>
  <div fxLayout="row">
    <div fxLayout="column" fxFlex="70">
      <form (keydown.enter)="false" (ngSubmit)="update()" #entrypointForm="ngForm" fxLayout="column">
        <div class="gv-form-section">
          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Name</mat-label>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="entrypoint.name" required [readonly]="readonly" [disabled]="entrypoint.defaultEntrypoint">
            <mat-hint>Entrypoint's name</mat-hint>
          </mat-form-field>

          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Description</mat-label>
            <input matInput type="text" placeholder="Description" name="description" [(ngModel)]="entrypoint.description" [readonly]="readonly" [disabled]="entrypoint.defaultEntrypoint">
            <mat-hint>Entrypoint's description</mat-hint>
          </mat-form-field>

          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Entrypoint url</mat-label>
            <input matInput type="text" placeholder="url" name="url" [(ngModel)]="entrypoint.url" [readonly]="readonly" required pattern="https?://.+">
            <mat-hint>Entrypoint's url</mat-hint>
          </mat-form-field>

          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Sharding tags</mat-label>
            <mat-chip-list #chipListTags>
              <mat-chip *ngFor="let tag of selectedTags" color="primary"
                        selected="true" (removed)="removeTag(tag)">
                <mat-icon style="vertical-align:middle;">filter_none</mat-icon>
                &nbsp;<span>{{tag.id}}</span>&nbsp;|&nbsp;<small>{{tag.name}}</small>
                <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
              <input matInput
                     aria-label="Sharding Tags"
                     placeholder="Sharding Tags"
                     [matAutocomplete]="auto"
                     [matChipInputFor]="chipListTags" [readonly]="readonly" [disabled]="entrypoint.defaultEntrypoint"
                     #chipInput>
            </mat-chip-list>

            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addTag($event)">
              <mat-option *ngFor="let tag of tags" [value]="tag.id">
                <mat-icon style="vertical-align:middle;">filter_none</mat-icon>
                <span>{{ tag.id }}</span> | <small>{{tag.name}}</small>
              </mat-option>
            </mat-autocomplete>
            <mat-hint>Select a sharding tag and press enter.</mat-hint>
          </mat-form-field>
        </div>

        <div fxLayout="row" *hasPermission="['organization_entrypoint_update']">
          <button mat-raised-button [disabled]="(!entrypointForm.valid || entrypointForm.pristine) && !formChanged" type="submit">SAVE</button>
        </div>

      </form>

      <div class="gv-page-delete-zone" fxLayout="column" *ngIf="canDelete()">
        <p>This operation cannot be undone.</p>
        Entrypoint will be deleted and will not be used for gateway deployment.
        <div class="gv-page-delete-button" fxLayout="row">
          <span fxFlex></span>
          <button mat-raised-button color="warn" (click)="delete($event)">DELETE</button>
        </div>
      </div>
    </div>
    <div class="gv-page-description" fxFlex>
      <h3>Manage entrypoint</h3>
      <div class="gv-page-description-content">
        <p>
          An entrypoint determines which url your end-users will have to use to contact the AM Gateway.
        </p>
        <p>
          Entrypoints are associated with tags. When a tag is also associated to a domain, the corresponding entrypoint will be automatically selected to display the right url to use to contact the Gateway.
        </p>
        <p>
          So, if you associate one of the following tags [ <small style="color:grey;">{{entrypoint.tags.length > 0 ? entrypoint.tags.join(', ') : 'No tag defined'}}</small> ] to a domain <small style="color:grey;">my-domain</small>,
          domain users will access to AM Gateway through the following url <small style="color:grey;">{{entrypoint.url}}/my-domain</small>
        </p>
      </div>
    </div>
  </div>
</div>

